<template>
  <WidgetEditFormContainer v-model="innerDialogShow" :inline="inline">
    <q-card>
      <template v-if="mode==='create'">
        <q-card-section>
          <div class="text-h6">页面组件</div>
          <div>直接嵌入 iFrame 页面作为一个组件模块 📊</div>
        </q-card-section>
      </template>
      <template v-if="mode==='update'">
        <q-card-section>
          <div class="text-h6">编辑页面组件</div>
        </q-card-section>
      </template>
      <q-card>
        <q-form
            @submit="submitWidget"
            class="q-gutter-md"
        >
          <q-card-section class="q-pt-none">
            <q-input class="q-mb-sm" bottom-slots
                     v-model="formData.data.url"
                     label="页面链接" filled
                     hint="此处输入页面链接 URL"
                     :rules="[val=>!!val || 'URL不可为空']"
            >
            </q-input>
            <q-input class="q-mb-sm" bottom-slots
                     v-model="formData.data.title"
                     label="页面标题" filled
                     hint="不输入则使用默认标题"
            >
            </q-input>
          </q-card-section>
          <q-card-section>
            <q-btn v-if="mode==='create'" type="submit"
                   color="green" icon-right="add" class="full-width"
            >确认添加
            </q-btn>
            <q-btn v-if="mode==='update'" type="submit"
                   color="green" class="full-width"
            >保存编辑
            </q-btn>
          </q-card-section>
        </q-form>
      </q-card>
    </q-card>
  </WidgetEditFormContainer>
</template>

<script>
import form from 'src/mixins/form'
import { genWidgetId } from 'src/utils/widget'
import WidgetEditFormContainer from '../../components/WidgetEditFormContainer'

export default {
  name: 'IframeWidgetEditForm',
  mixins: [form],
  components: {
    WidgetEditFormContainer
  },
  props: {
    defaultFormData: {
      type: Object,
      default: () => ({ data: {} })
    }
  },
  data () {
    return {}
  },
  methods: {
    async submitWidget () {
      if (!/^http[s]?/.test(this.formData.data.url || '')) {
        this.formData.data.url = this.formData.data.url.replace(/^[/\\]*/, 'https://')
      }
      if (this.mode === 'create') {
        await this.createWidget({
          id: genWidgetId('IFRAME'),
          type: 'IframeWidget',
          w: 4,
          h: 3
        })
      }
      if (this.mode === 'update') {
        await this.saveWidget()
      }
    }
  }
}
</script>

<style scoped>
</style>
